<script setup>
import dayjs from 'dayjs'
import { disposeOrderSuperviseDetail } from '@/apis/order.js'
import NoData from '@/views/workOrder/components/NoData.vue'
import { useRoute, useRouter } from 'vue-router/composables'
import { Toast } from 'vant'
import ClickBox from '@/components/ClickBox.vue'

const router = useRouter()
const route = useRoute()
const queryObject = ref(route.query)

const orderNo = ref(queryObject.value.orderNo)
const state = reactive({
  tableData: []
})

// 获取接口数据
const getSuperviseD = async () => {
  await disposeOrderSuperviseDetail({ orderNo: orderNo.value })
    .then((res) => {
      if (res.ret === 0) {
        state.tableData = res.data.map((item) => {
          return item
        })
        //  const pageNum = parseInt(res.data.pageination.totalPage)
      } else {
        Toast.fail(res.msg)
      }
    })
    .catch((error) => {
      console.error('请求失败:', error)
    })
}

// 跳转到待反馈详情
const goDetail = (item) => {
  router.push(`/supervise/detail?orderNo=${orderNo.value}&superviseId=${item.id}&orgName=${item.orgName}&timeoutDays=${item.timeoutDays}&
  createTime=${item.createTime}&canFeedBack=${item.canFeedBack}&userName=${item.userName}`)
}

onMounted(async () => {
  await getSuperviseD()
})
</script>

<template>
  <div class="box-border h-full overflow-x-hidden overflow-y-auto bg-#F5F7FA">
    <NoData title="没有查询到相关数据" v-if="state.tableData.length === 0" />
    <div class="hf p-t-5px p-l-16px p-r-16px my-10px">
      <div
        v-for="item in state.tableData"
        :key="item.id"
        @click="goDetail(item)"
        class="hf-list m-b-14px overflow-hidden"
      >
        <ClickBox>
          <div class="p-14px">
            <div class="hf-header h-20px">
              <div class="text-16px fontf font-400 text-#1E2226">
                {{ item.orgName }}
              </div>
              <div class="text-#71747A text-14px">
                督办时限 {{ item.timeoutDays }} 天
              </div>
            </div>
            <div class="hf-header m-t-3px">
              <div
                class="h-20px my-1px text-14px font-400 leading-20px text-#71747A"
              >
                发起时间：
                {{ dayjs(item.createTime).format('YYYY-MM-DD HH:mm') ?? '' }}
              </div>
              <div
                class="h-20px my-1px text-14px font-400 leading-20px text-#71747A"
              >
                {{ item.canFeedBack ? '需回复' : '' }}
              </div>
            </div>
          </div>
        </ClickBox>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
.hf {
  .supervise-hf {
    font-family: 'PingFangSC-SNaNpxibold';
    font-weight: 600;
    font-size: 18px;
    height: 34px;
    color: #1e2226;
    letter-spacing: 0;
    line-height: 22px;
  }
  .hf-list {
    font-weight: 400;
    font-size: 16px;
    color: #1e2226;
    letter-spacing: 0;
    line-height: 20px;
    background: #ffffff;
    border-radius: 4px;
    .hf-header {
      display: flex;
      justify-content: space-between;
    }
    .fontf {
      font-family: 'PingFangSC-SNaNpxibold';
      font-weight: 600;
      font-size: 16px;
      color: #171a1d;
    }
    &.btn {
      background-color: #36b374;
      color: #ffffff;
      justify-content: center;
      font-family: 'PingFangSC-Medium';
      font-weight: 500;
      text-align: center;
      font-size: 16px;
    }
  }
}
</style>
